<template>
  <!-- 搜索模块的单曲和歌词组件 -->
  <div class="sc-songlist">
    <ul class="sc-songlist-hd clearfix">
      <li class="songlist-hd-name">歌曲</li>
      <li class="songlist-hd-author">歌手</li>
      <li class="songlist-hd-album">专辑</li>
      <li class="songlist-hd-time">时长</li>
    </ul>
    <ul class="sc-songlist-lists clearfix">
      <li
        class="sc-songlist-lists-li"
        v-for="(item, index) in songs"
        :key="index"
      >
        <div class="songlist-item">
          <div class="songlist-rank">
            <i class="iconfont" @click="clickPlay(item)">&#xe8a8;</i>
          </div>
          <div
            class="songlist-songname"
            @mouseover="showControl(index)"
            @mouseleave="hideControl(index)"
          >
            <div class="songlist-name-txt">
              <a
                href="javascript:;"
                :title="item.name"
                @click="clickSong(item.id)"
                >{{ item.name }}</a
              >
              <span class="songname-alia" v-if="item.alia.length > 0">
                - ({{ item.alia[0] }})</span
              >
              <span
                class="songname-alia"
                v-else-if="item.tns && item.tns.length > 0"
              >
                - ({{ item.tns[0] }})</span
              >
            </div>
            <span class="songlist-mv" v-if="item.mv != 0">
              <a href="javascript:;" title="MV" @click="clickMv(item.mv)">
                <i class="iconfont">&#xe640;</i>
              </a>
            </span>
            <div class="songlist-control">
              <a href="javascript:;" title="播放" @click="clickPlay(item)">
                <i class="iconfont">&#xe8a8;</i>
              </a>
              <a
                href="javascript:;"
                title="添加到播放列表"
                @click="clickAdd(item)"
              >
                <i class="iconfont">&#xe8c9;</i>
              </a>
              <a href="javascript:;" title="收藏" @click="clickCol(item.id)">
                <i class="iconfont">&#xe8c8;</i>
              </a>
              <a href="javascript:;" title="分享" @click="clickShare(item)">
                <i class="iconfont">&#xe8af;</i>
              </a>
            </div>
          </div>
          <div class="songlist-artist">
            <a
              v-for="(art, n) in item.ar"
              :key="n"
              href="javascript:;"
              @click="clickArtist(art.id)"
              :title="art.name"
            >
              <i v-if="n > 0"> / </i>
              {{ art.name }}
            </a>
          </div>
          <div class="songlist-album">
            <a
              href="javascript:;"
              @click="clickAlbum(item.al.id)"
              :title="item.al.name"
            >
              《{{ item.al.name }}》
            </a>
          </div>
          <div class="songlist-time">{{ item.dt | changeTime }}</div>
        </div>

        <div class="sc-song-lyric" v-if="showLyric">
          <!-- <div ref="scLyric" :class="['songlist-lyric', { limit: isLimit }]"> -->
          <div ref="scLyric" class="songlist-lyric limit">
            <p class="song-lyric-item">{{ item.lyrics[0] | clearB }}</p>
            <p
              class="song-lyric-item"
              v-for="(it, i) in item.lyrics.slice(1)"
              :key="i"
            >
              {{ it }}
            </p>
          </div>
          <p class="song-lyric-item">
            <a class="lyric-height" @click="changeLimit(index)">[展开]</a>
          </p>
        </div>
      </li>
    </ul>
    <small-tip :tipMessage="smallTipMsg" v-if="showSmallTip"></small-tip>
  </div>
</template>

<script>
import { changeTime } from "common/time.js";
import SmallTip from "components/tip/SmallTip";

export default {
  components: {
    SmallTip,
  },
  props: {
    songs: {
      type: Array,
      default() {
        return [];
      },
    },
    showLyric: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      cs: [],
      ns: [],
      showSmallTip: false,
      smallTipMsg: "操作提示",
    };
  },
  filters: {
    // 将毫秒数转换为时分秒
    changeTime(time) {
      return changeTime(time);
    },
    clearB(text) {
      let rega = /\<b\>/;
      let regb = /\<\/b\>/;
      return text.replace(rega, "").replace(regb, "");
    },
  },
  methods: {
    clickShare(item) {
      if (this.$store.state.isLogin) {
        let newItem = {
          id: item.id,
          type: "song",
          name: item.name,
        };
        item.ar.forEach((item, index) => {
          if (index == 0) {
            newItem.artist = item.name;
          } else {
            newItem.artist += "/" + item.name;
          }
        });
        this.$store.commit("changeShowShare", true);
        this.$store.commit("changeShareItem", newItem);
      } else {
        this.smallTipMsg = "请登录后再分享歌曲";
        this.showSmallTip = true;
        setTimeout(() => {
          this.showSmallTip = false;
        }, 1000);
      }
    },
    clickCol(id) {
      if (this.$store.state.isLogin) {
        this.$store.commit("changeShowCollect", true);
        this.$store.commit("changeSId", id);
      } else {
        this.smallTipMsg = "请登录后再收藏歌曲";
        this.showSmallTip = true;
        setTimeout(() => {
          this.showSmallTip = false;
        }, 1000);
      }
    },
    clickPlay(item) {
      var newItem = {
        id: item.id,
        name: item.name,
        ar: item.ar,
        al: item.al,
        mv: item.mv,
        dt: item.dt,
        fee: item.fee,
      };
      this.playSongs(newItem);
    },
    clickAdd(item) {
      var newItem = {
        id: item.id,
        name: item.name,
        ar: item.ar,
        al: item.al,
        mv: item.mv,
        dt: item.dt,
        fee: item.fee,
      };
      this.addSongs(newItem);
    },
    changeLimit(index) {
      // console.log(
      //   this.$refs.scLyric[index].nextSibling.firstElementChild.innerText
      // );
      if (this.$refs.scLyric[index].classList.length == 1) {
        // 添加limit类
        this.$refs.scLyric[index].classList.add("limit");
        document.documentElement.scrollTo({
          top: this.$refs.scLyric[index].offsetTop + 200,
          behavior: "smooth",
        });
        this.$refs.scLyric[index].nextSibling.firstElementChild.innerText =
          "[展开]";
      } else {
        this.$refs.scLyric[index].classList.remove("limit");
        this.$refs.scLyric[index].nextSibling.firstElementChild.innerText =
          "[收起]";
      }
    },
    clickMv(id) {
      this.playMv(id);
    },
    clickAlbum(id) {
      this.playAlbumDetail(id);
    },
    clickArtist(id) {
      this.playArtistDetail(id);
    },
    clickSong(id) {
      this.playSong(id);
    },
    hideControl(index) {
      this.cs[index].style.display = "none";
      this.ns[index].style.maxWidth = "90%";
    },
    showControl(index) {
      this.cs = document.querySelectorAll(".songlist-control");
      this.ns = document.querySelectorAll(".songlist-name-txt");
      this.cs[index].style.display = "block";
      this.ns[index].style.maxWidth = "65%";
      // console.log(this.ns[index].style);
    },
  },
};
</script>

<style>
.sc-songlist {
  padding: 20px;
  width: 1200px;
  background-color: var(--color-theme-light-4);
  border-radius: 15px;
}
.sc-songlist-hd,
.sc-songlist .songlist-item {
  position: relative;
  padding-left: 40px;
  font-size: 14px;
}
.sc-songlist .sc-songlist-hd {
  height: 40px;
  line-height: 40px;
  background-color: var(--color-theme-light-5);
  font-size: 18px;
  color: #999;
}
.sc-songlist .songlist-hd-name {
  float: left;
  width: 50%;
}
.sc-songlist .songlist-hd-author {
  float: left;
  width: 20%;
  padding-left: 5px;
}
.sc-songlist .songlist-hd-album {
  float: left;
  width: 20%;
  padding-left: 5px;
}
.sc-songlist .songlist-hd-time {
  float: left;
  padding-left: 5px;
}
.sc-songlist .sc-songlist-lists-li {
  min-height: 30px;
  line-height: 30px;
  background-color: var(--color-theme-light-4);
}
.sc-songlist .sc-songlist-lists-li:nth-child(even) {
  background-color: var(--color-theme-light-5);
}
.sc-songlist .songlist-item {
  height: 30px;
}
.sc-songlist .sc-songlist-lists-li .songlist-number {
  position: absolute;
  left: 0;
  width: 50px;
  text-align: right;
  font-size: 14px;
  color: #999;
}
.sc-songlist .sc-songlist-lists-li .songlist-rank {
  position: absolute;
  left: 10px;
  color: #999;
  cursor: pointer;
}
.sc-songlist .sc-songlist-lists-li .songlist-rank .iconfont {
  font-size: 20px;
}
.sc-songlist .sc-songlist-lists-li .songlist-rank:hover {
  color: var(--color-theme);
}
.sc-songlist .songlist-album,
.sc-songlist .songlist-artist,
.sc-songlist .songlist-number,
.sc-songlist .songlist-songname,
.sc-songlist .songlist-time {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-songlist .songlist-album a:hover,
.sc-songlist .songlist-artist a:hover {
  color: var(--color-theme);
}
.sc-songlist .songlist-songname {
  position: relative;
  float: left;
  width: 50%;
}
.sc-songlist .songlist-songname .songlist-name-txt {
  float: left;
  height: 30px;
  line-height: 30px;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
  white-space: nowrap;
}
.sc-songlist .songlist-name-txt .songname-alia {
  font-size: 13px;
  color: #999;
}
.sc-songlist .songlist-songname a:hover {
  color: var(--color-theme);
}
.sc-songlist .songlist-songname .songlist-control {
  float: right;
  margin-right: 20px;
  display: none;
}
.sc-songlist .songlist-control .iconfont {
  font-size: 20px;
  color: #999;
}
.sc-songlist .songlist-control .iconfont:hover {
  color: var(--color-theme);
}
.sc-songlist .songlist-artist {
  float: left;
  width: 20%;
  padding-left: 5px;
}
.sc-songlist .songlist-album {
  float: left;
  width: 20%;
  padding-left: 5px;
}
.sc-songlist .songlist-time {
  float: left;
  padding-left: 5px;
  color: #999;
}

.sc-song-lyric {
  width: 100%;
  padding-left: 50px;
}
.sc-songlist .songlist-lyric.limit {
  max-height: 120px;
  overflow: hidden;
}
.sc-songlist .song-lyric-item {
  line-height: 30px;
  font-size: 14px;
  text-align: left;
}
.sc-songlist .lyric-height {
  color: var(--color-theme);
  cursor: pointer;
}
</style>